<template>
  <div class="score-ranking">
    <a-card title="综测分排名榜">
      <template #extra>
        <a-space>
          <a-select v-model:value="yearFilter" placeholder="选择学年" style="width: 150px">
            <a-select-option :value="2024">2024年</a-select-option>
            <a-select-option :value="2023">2023年</a-select-option>
            <a-select-option :value="2022">2022年</a-select-option>
          </a-select>
          <a-select v-model:value="scopeFilter" placeholder="选择范围" style="width: 150px">
            <a-select-option value="class">班级</a-select-option>
            <a-select-option value="major">专业</a-select-option>
            <a-select-option value="college">学院</a-select-option>
          </a-select>
        </a-space>
      </template>

      <a-list
        item-layout="horizontal"
        :data-source="rankingList"
        :pagination="{ pageSize: 20 }"
      >
        <template #renderItem="{ item, index }">
          <a-list-item>
            <a-list-item-meta>
              <template #avatar>
                <a-badge
                  :count="index + 1"
                  :number-style="{
                    backgroundColor: index < 3 ? ['#ffd700', '#c0c0c0', '#cd7f32'][index] : '#1890ff',
                    fontSize: '16px',
                    fontWeight: 'bold'
                  }"
                />
              </template>
              <template #title>
                <a>{{ item.student || '学生名称' }}</a>
              </template>
              <template #description>
                <a-space>
                  <span>学号: {{ item.student_id || '-' }}</span>
                  <span>班级: {{ item.class_name || '-' }}</span>
                  <span>专业: {{ item.major || '-' }}</span>
                </a-space>
              </template>
            </a-list-item-meta>
            <template #actions>
              <a-statistic
                title="综测总分"
                :value="item.grade || 0"
                :precision="2"
                :value-style="{ color: '#3f8600', fontSize: '24px', fontWeight: 'bold' }"
                suffix="分"
              />
            </template>
          </a-list-item>
        </template>
      </a-list>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const yearFilter = ref(2024)
const scopeFilter = ref('class')
const rankingList = ref([])

// TODO: 加载排名数据
// const loadRanking = async () => {
//   const response = await api.getScoreRanking({
//     year: yearFilter.value,
//     scope: scopeFilter.value
//   })
//   rankingList.value = response.data
// }
</script>

<style scoped>
:deep(.ant-list-item) {
  padding: 16px 24px;
  transition: all 0.3s;
}

:deep(.ant-list-item:hover) {
  background-color: #f5f5f5;
}
</style>
